<script lang="ts" setup>
const list = [
  { title: '标题1-课程模板................................................', ratio: '22%' },
  { title: '标题2-课程模板................................................', ratio: '23%' },
  { title: '标题3-课程模板................................................', ratio: '50%' },
  { title: '标题4-课程模板................................................', ratio: '99%' },
  { title: '标题5-课程模板................................................', ratio: '50%' },
  { title: '标题6-课程模板................................................', ratio: '20%' },
  { title: '标题7-课程模板................................................', ratio: '88%' }
]
</script>

<template>
  <div h-78 w-96 flex="~ col" bg="[url(@/assets/image/border/TOPPurchaseBorder.png)] no-repeat center cover">
    <div p="x-8 t-4" text="#17caf0 5.5" font="bold">近期销售占比</div>
    <div p="x-5.5" m="t-3">
      <div flex="~ v-center" gap="2" v-for="item, index in list">
        <span text="#00ffc3 5.5">{{ index + 1 }}</span>
        <span truncate text="white 4">{{ item.title }}</span>
        <span text="#1dc2ff 3.5">{{ item.ratio }}</span>
      </div>
    </div>
  </div>
</template>
